<div class="{{ apesInDatePicker ? prefixCls + '-panel' : '' }}">
  <div
    class="{{ prefixCls }}-inner {{ apesInDatePicker ? prefixCls + '-column-' + enabledColumns : '' }}"
    [style.width.px]="apesInDatePicker ? null : enabledColumns * 56">
    <div class="{{ prefixCls }}-input-wrap">
      <input
        type="text"
        class="{{ prefixCls }}-input"
        [placeholder]="apesPlaceHolder"
        [apesTime]="format"
        [(ngModel)]="time.value"
        (blur)="time.changed()">
    </div>
    <div class="{{ prefixCls }}-combobox">
      <div
        *ngIf="hourEnabled"
        #hourListElement
        class="{{ prefixCls }}-select">
        <ul>
          <ng-container *ngFor="let hour of hourRange">
            <li
              *ngIf="!(apesHideDisabledOptions && hour.disabled)"
              (click)="selectHour(hour)"
              class="
                {{ isSelectedHour(hour) ? prefixCls + '-select-option-selected' : '' }}
                {{ hour.disabled ? prefixCls + '-select-option-disabled' : '' }}
              "
            >
              {{ hour.index | number:'2.0-0' }}
            </li>
          </ng-container>
        </ul>
      </div>
      <div
        *ngIf="minuteEnabled"
        #minuteListElement
        class="{{ prefixCls }}-select">
        <ul>
          <ng-container *ngFor="let minute of minuteRange">
            <li
              *ngIf="!(apesHideDisabledOptions && minute.disabled)"
              (click)="selectMinute(minute)"
              class="
                {{ isSelectedMinute(minute) ? prefixCls + '-select-option-selected' : '' }}
                {{ minute.disabled ? prefixCls + '-select-option-disabled' : '' }}
              "
            >
              {{ minute.index | number:'2.0-0' }}
            </li>
          </ng-container>
        </ul>
      </div>
      <div
        *ngIf="secondEnabled"
        #secondListElement
        class="{{ prefixCls }}-select">
        <ul>
          <ng-container *ngFor="let second of secondRange">
            <li
              *ngIf="!(apesHideDisabledOptions && second.disabled)"
              (click)="selectSecond(second)"
              class="
                {{ isSelectedSecond(second) ? prefixCls + '-select-option-selected' : '' }}
                {{ second.disabled ? prefixCls + '-select-option-disabled' : '' }}
              "
            >
              {{ second.index | number:'2.0-0' }}
            </li>
          </ng-container>
        </ul>
      </div>
      <div
        *ngIf="apesUse12Hours"
        #use12HoursListElement
        class="{{ prefixCls }}-select">
        <ul>
          <ng-container *ngFor="let range of use12HoursRange ">
            <li
              *ngIf="!apesHideDisabledOptions"
              (click)="select12Hours(range)"
              class="
                {{ isSelected12Hours(range) ? prefixCls + '-select-option-selected' : '' }}
              "
            >
              {{ range.value }}
            </li>
          </ng-container>
        </ul>
      </div>
    </div>
    <div class="{{ prefixCls }}-addon" *ngIf="apesAddOn">
      <ng-template [ngTemplateOutlet]="apesAddOn"></ng-template>
    </div>
  </div>
</div>
